<template>
    <div>
        <h1>这里是父组件</h1>
        <el-alert :title="msg" />
        <el-row :gutter="20">
            <el-col :span="12">
                <Child :msg="msg" @child-click="handlerChildClick"></Child>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <h1>这里是待办清单</h1>
                    <ToDo @to-list="addList" @remove-all="remove"></ToDo>
                    <ul class="list_box">
                        <li v-for="(item,index) in list">
                            {{ index+1 }}-{{ item }}
                        </li>
                    </ul>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
  
<script>
//1.引入组件
import { ref } from 'vue';
import Child from './components/Child.vue';
import ToDo from './components/ToDo.vue';

export default {
    name: 'Event',
    components: {
        //2.注册组件
        Child,
        ToDo
    },
    setup() {
        const msg = ref("我是父组件的值")
        const list=ref([])
        const handlerChildClick = function (value) {
            msg.value = value
        }
        const addList = function (text) {
            list.value = push(text)
        }
        const remove = function () {
            list.value = []
        }
        return {
            msg,
            list,
            addList,
            remove,
            handlerChildClick
        }
    }
}


</script>
  
<style>
.list_box{
    height: 280px;
    padding: 20px;
    background-color: gainsboro;
}
li{
    list-style: none;
}
</style>
  